<script setup>
//导入的包==============================================================================================
import {ref} from "vue";
import request from "@/utils/request.js";
import { ElMessage } from 'element-plus'
import router from "@/router/router.js";
import VueCookies from "vue-cookies";
//数据定义==============================================================================================
const user = ref({
  userId:'',
  password:''
});
const userRef = ref();
const tableData = ref([]);


const rules = {
  userId: [{ required: true, message: "请输入用户名",trigger: 'blur' }],
  password: [{ required: true, message: "请输入密码",trigger: 'blur' }],
};



//方法定义==============================================================================================
const init = () => {
  console.log("我是页面初始化的方法");
  request.get('/list')
      .then((res) => {
        console.log(res)
        tableData.value= res.data;  // 将获取的数据存储在组件的 data 中
      })
      .catch((error) => {
        console.error('获取数据失败:', error);
      });
};
init();




const login=() => {
  console.log(user.value);  // 打印 user.value，确保它包含你期望的数据
  request.post('/login',user.value).then((res)=>{
    if(res.code=='200')
    {
      ElMessage.success('登录成功')
      //本地存储
      localStorage.setItem("user",JSON.stringify(res.data))

      router.push("/mainAll")
    }
    else
    {
      ElMessage.error('登录失败')
    }
  })
}

const Detail = ref([
  {
    userId: '123',
    password: '123'
  },
  {
    userId: '333',
    password: '123'
  }
]);




</script>

<template>
  <div style="background-color: cadetblue;width: 100%; height: 100vh;
        display: flex;align-items: center;justify-content: center;">
    <div style="display: flex;align-items: center;justify-content: center;background-color: white;
              border-radius: 20px;overflow: hidden; width: 700px;height: 400px">
      <div style="flex: 1">
        <img src="../assets/login_img.png" style="width: 350px; height: auto;">
      </div>
      <div style="flex:1;" >
        <div style="font-size: 20px; font-weight: bold; color: #333; text-align: center;font-family: 'SimSun', '宋体', serif;">欢迎登录智享云盘</div>
        <div></div>

        <el-form :model="user" ref="userRef" :rules="rules">
          <el-form-item prop="userId">
            <el-input style="width: 80%;margin-left: 40px;margin-top: 40px"  size="large" placeholder="请输入账号" v-model="user.userId">
              <template #prefix>
                <el-icon><User /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input style="width: 80%;margin-left: 40px" size="large" show-password placeholder="请输入密码" v-model="user.password">
              <template #prefix>
                <el-icon><Lock /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-button style="width: 80%;margin-left: 40px" type="success" @click="login">登陆</el-button>
        </el-form>

        <div style="display: flex;align-items: center;justify-content: center;margin-top: 10px">
          <div style="margin-top: 10px">没有账号？立即 </div><span class="custom-register" style="color: #0f9876; cursor: pointer;" @click="router.push('/register')">注册</span>
          <div style="margin-top: 10px;margin-left: 70px;">忘记密码</div>
        </div>
      </div>
    </div>
    <div >
    </div>
<!--    <el-card>-->
<!--      我是卡片-->
<!--        <el-table :data="tableData" style="width: 100%">-->
<!--          <el-table-column prop="userId" label="用户名" width="180" />-->
<!--          <el-table-column prop="password" label="密码" width="180" />-->
<!--        </el-table>-->
<!--    </el-card>-->
    <el-card>
      测试的账号密码
      <el-table :data="Detail" style="width: 100%">
        <el-table-column prop="userId" label="用户名" width="180"></el-table-column>
        <el-table-column prop="password" label="密码" width="180"></el-table-column>
      </el-table>
    </el-card>


  </div>



</template>

<style scoped>
::v-deep .el-form-item__error {
  margin-left: 40px;
}
::v-deep .custom-register {
  margin-top:10px
}


</style>